<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

#pic .border{
	border:3px solid red;
}
 #pic img{
	border: 3px solid transparent;
}

	</style>
</head>
<body>
	<input type="button" value="点击按钮" id="btn">
	<input type="text" value="1" name="name1">
	<input type="text" value="2" name="name2">
	<input type="text" value="3" name="name2">
	<input type="text" value="4" name="name4">
	<div class="pic" id="pic">
		<img src="../image/1-small.jpg" alt="">
		<img src="../image/1-small.jpg" alt="">
		<img src="../image/1-small.jpg" alt="">
	</div>
	

	<script>

		var btnObj = document.getElementById('btn')
		var inpObj = document.getElementsByName('name2')
		var picObj = document.getElementById('pic')
		var imgObj = picObj.children

		btnObj.onclick = function(){
			for(var i=0;i<inpObj.length;i++){
				inpObj[i].value = "我是修改的值"

			}
		}

		

		for(var i=0;i<imgObj.length;i++){
			imgObj[i].onmouseenter = function(){
				this.className = '#pic border'
			}
			imgObj[i].onmouseleave = function(){
				this.className = ''
			}
		}

	</script>
</body>
</html>